import ScrollBarLayout from '@/components/ScrollBarLayout';
import Cls from 'classnames';
import { useContext, useEffect, useState } from 'react';
import { ChangeControllerContext } from '../common/useOAContext';
import { Form, Spin, Tooltip, message } from 'antd';
import { useDescriptions, Descriptions } from '@/components/Descriptions';
import pageStyles from '@/common/pageLayout.less';
import { downloadTemplate, getFileNameNotType, getLoadMapList, getTenantID, splitFileUrl } from '@/utils';
import { ILoadMapTypeAll } from '@/common';
import { TagSelectNew as TagSelect } from '@/components/TagSelectNew';
import MyIcon from '@/components/MyIcon';
import { formatDecimal, renderFileFunc } from '../../Acommon';
import { DescriptionsType, useDescriptionsType } from '@/components/DescriptionsType';
import moment from 'moment';

export const DetailInfoCenterViewMainOA: React.FC = () => {
  /** 引入上下文 */
  const { styleFixCls, infoObj } = useContext(ChangeControllerContext);

  const [isPass, setIsPass] = useState<boolean>(false); // 是否通过线下审批

  const [titleFlag, setTitleFlag] = useState(false); /**技术职称是否必填*/

  /** 采购方式字典services */
  const loadMdicIds: string[] = [`${getTenantID()}${ILoadMapTypeAll.PURCHASE_METHOD}`];
  const { loadMapInfo: dictionaryData, mapLoading } = getLoadMapList(loadMdicIds);
  const purchaseFs = dictionaryData?.[`${getTenantID()}${ILoadMapTypeAll.PURCHASE_METHOD}`];

  const [changeFromRef] = Form.useForm(); // 表单实例

  // 处理树数据
  const orgTreeData = (data: any[]): any[] => {
    let treeSearch = '';
    return data?.map((item: any) => {
      const name = item?.name;
      const nameLength = name?.length;
      const select = name?.search(treeSearch);
      const searchLength = treeSearch?.length;
      const afterStr = name?.slice(0, select);
      const selectStr = treeSearch;
      const beforeStr = name?.slice(select + searchLength, nameLength);
      const titleTree =
        select > -1 && selectStr ? (
          <span className={pageStyles['over-flow-hidden']}>
            {afterStr}
            <span style={{ color: '#f50' }}>{selectStr}</span>
            {beforeStr}
          </span>
        ) : (
          <span className={pageStyles['over-flow-hidden']}>{item?.name}</span>
        );

      if (item?.children && item?.children?.length > 0) {
        return {
          ...item,
          title: <div id={item?.id}>{titleTree}</div>,
          searchTitle: item?.name,
          key: item?.id,
          value: item?.id,
          children: orgTreeData(item?.children),
        };
      }
      return {
        ...item,
        title: <div id={item?.id}>{titleTree}</div>,
        searchTitle: item?.name,
        key: item?.id,
        value: item?.id,
      };
    });
  };

  useEffect(() => {
    if (infoObj?.id) {
      methods?.setFieldsValue({
        ...infoObj,
        // expectSum: formatDecimal(infoObj?.expectSum),
      });
    }
  }, [infoObj]);

  /**表格配置*/
  const [config, methods] = useDescriptionsType({
    name: 'source-experts',
    labelWidth: 240,
    schemas: [
      {
        title: '相关采购项目',
        key: 'RelatedProcurementItems',
        fieldChildren: [
          {
            label: '项目编号',
            field: 'purchProjectCode',
            component: 'Input',
            placeholder: '--',
            message: '点击右侧放大镜选择采购项目',
            required: true,
            disabled: true,
          },
          {
            label: '开标日期',
            field: 'bidOpenTime',
            component: 'Render',
            placeholder: '--',
            disabled: true,
            render(text, record) {
              return record?.bidOpenTime ? <span>{moment(record?.bidOpenTime).format('YYYY-MM-DD')}</span> : '--';
            },
          },
          {
            label: '项目名称',
            field: 'purchProjectName',
            component: 'Input',
            placeholder: '--',
            colSpan: 2,
            disabled: true,
          },
        ],
      },

      {
        title: '采购人评标代表资格条件',
        key: 'BidEvaluationRepresentative',
        fieldChildren: [
          {
            label: '姓名',
            field: 'fullName',
            component: 'Input',
            required: true,
            colSpan: 1,
            placeholder: '--',
            message: '请选择',
            disabled: true,
            contentAfter: null,
          },
          {
            label: '证件号码',
            field: 'cardNum',
            component: 'Input',
            required: true,
            disabled: true,
            colSpan: 1,
            placeholder: '--',
            message: '请输入',
          },
          {
            label: '工作单位名称',
            field: 'companyName',
            component: 'Input',
            disabled: true,
            required: true,
            colSpan: 2,
            placeholder: '--',
            message: '请输入',
          },
          {
            label: '现任职务',
            field: 'positionName',
            component: 'Input',
            required: true,
            disabled: true,
            colSpan: 1,
            placeholder: '--',
            message: '请输入',
          },

          {
            label: '联系电话',
            field: 'phoneMobile',
            component: 'Input',
            required: true,
            disabled: true,
            colSpan: 1,
            placeholder: '--',
            message: '请输入',
          },

          {
            label: '是否有职称',
            field: 'titleFlag',
            component: 'Render',
            required: true,
            slotRender: (text = '0') => {
              if (text == '1') {
                return <span style={{ marginLeft: 8 }}>有</span>;
              } else {
                return <span style={{ marginLeft: 8 }}>无</span>;
              }
            },
          },
          {
            label: '技术职称',
            field: 'titleTech',
            component: 'Input',
            placeholder: '--',
            message: '请输入',
            required: titleFlag ? true : false,
            disabled: true,
          },

          {
            label: '是否熟悉招标采购有关法规',
            field: 'lawFlag',
            component: 'Render',
            required: true,
            slotRender: (text = '0') => {
              if (text == '1') {
                return <span style={{ marginLeft: 8 }}>有</span>;
              } else {
                return <span style={{ marginLeft: 8 }}>无</span>;
              }
            },
          },
          {
            label: '是否具有同类项目评标经历',
            field: 'experFlag',
            component: 'Render',
            required: true,
            slotRender: (text = '0') => {
              if (text == '1') {
                return <span style={{ marginLeft: 8 }}>有</span>;
              } else {
                return <span style={{ marginLeft: 8 }}>无</span>;
              }
            },
          },

          {
            label: '推荐说明',
            field: 'suggestInfo',
            component: 'InputTextArea',
            placeholder: '--',
            message: '请输入',
            required: true,
            maxLength: 200,
            allowClear: true,
            autoSize: { minRows: 4, maxRows: 6 },
            showCount: true,
            disabled: true,
            colSpan: 2,
          },
          {
            label: '相关附件',
            field: 'attachURL',
            component: 'Render',
            required: false,
            colSpan: 2,
            slotRender: () => {
              return (
                <span style={{ marginLeft: 8 }}>
                  {renderFileFunc({
                    record: infoObj,
                    fileName: 'attachURL',
                    downloadAddress: '/purchaseSourceExpertController/downloadFile',
                  })}
                </span>
              );
            },
          },
        ],
      },
    ],
  });

  return (
    <>
      <div className="commonTabsBodyDom">
        <div className={Cls('tabsBodyInfoDom', `${styleFixCls}updateFormBox`)}>
          <ScrollBarLayout style={{ padding: '5px 100px' }}>
            <Spin spinning={mapLoading}>
              {/* <Descriptions config={config} /> */}
              <DescriptionsType config={config} />
            </Spin>
          </ScrollBarLayout>
        </div>
      </div>
    </>
  );
};
